<%--
  Created by IntelliJ IDEA.
  User: 张乔
  Date: 2024/6/10
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>

<html>
<style>
    .tools-div {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid #ebeef5;
        border-radius: 3px;
        background-color: #fff;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>


    <title>员工管理</title>
    <!-- 引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">


    <el-dialog  :visible.sync="dialogVisible"  title="添加或修改" width="40%">
        <el-form label-width="120px">
            <el-form-item label="用户名">
                <el-input v-model="employeesInfo.username"></el-input>
            </el-form-item>
            <el-form-item v-if="employeesInfo.employeeId == null" label="密码">
                <el-input type="password"  v-model="employeesInfo.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="employeesInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="所在部门">
                <el-input v-model="employeesInfo.position"></el-input>
            </el-form-item>
            <el-form-item label="所在职位">
                <el-input v-model="employeesInfo.department"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                        class="avatar-uploader"
                        action="http://127.0.0.1:8080/file/fileUpload/"
                        :show-file-list="false"
                        shape="circle"
                        :on-success="handleAvatarSuccess">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>

            </el-form-item>
            <el-form-item label="出生日期"  v-if="employeesInfo.employeeId == null">
                <el-input  type="date"  v-model="employeesInfo.dateOfS"></el-input>
            </el-form-item>
            <el-form-item label="入职日期"  v-if="employeesInfo.employeeId == null">
                <el-input  type="date"  v-model="employeesInfo.hireDateS"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-input    v-model="employeesInfo.gender"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


    <el-button type="primary"   @click="addShow"  class="tools-div">添加员工</el-button>
    <!---数据表格-->
    <el-table :data="employeesList" style="width: 100%">
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="email" label="邮箱"  width="180"></el-table-column>
        <el-table-column prop="avatar" label="头像" #default="scope">
            <el-avatar shape="square" :size="50" :src="scope.row.base64Avatar"></el-avatar>
    <%--            {{scope.row.avatar}}--%>
<%--            {{ avatar }}--%>
        </el-table-column>
        <el-table-column prop="position" label="所在部门"></el-table-column>
        <el-table-column prop="department" label="所在职位"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="hireDateS" label="入职时间"></el-table-column>
        <el-table-column prop="dateOfS" label="出生时间"></el-table-column>
        <el-table-column label="操作" align="center" width="300" #default="scope">
            <el-button type="primary" size="small" @click="editSysUser(scope.row)">
                修改
            </el-button>
            <el-button type="danger" size="small"  @click="deleteByIdFun(scope.row)" >
                删除
            </el-button>
        </el-table-column>
    </el-table>




    <el-pagination
            v-model:current-page="pageParams.page"
            v-model:page-size="pageParams.limit"
            :page-sizes="[3,5,10, 20, 50, 100]"
            @size-change="SizeChange"
            @current-change="CurrentChange"
            layout="total, sizes, prev, pager, next"
            :total="total">
        <!---分页-->
    </el-pagination>


<%--<img :src="http://localhost:8080/static/image/20.png" alt="">--%>





</div>
</body>

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                employeesList: [],
                pageParamsForm: {
                    page: 1, // 页码
                    limit: 10, // 每页记录数
                },
                pageParams: null,
                total: 0,
                dialogVisible: false,
                employeesInfo:{
                    employeeId: null,
                    username: '',
                    password: '',
                    dateOf: '',
                    gender: '',
                    hireDate: '',
                    departmentId: null,
                    position: '',
                    department: '',
                    email: '',
                    phone: '',
                    avatar: '',
                    hireDateS: '',
                    dateOfS: ''

                },
                id: 1

            }
        },
        methods: {
          async  getEmployeesList(){
        let {data}= await axios.get('http://localhost:8080/employees/getPage/'+this.pageParams.page+"/"+this.pageParams.limit)
                   this.employeesList=data.list
              this.total=data.total

            },
            //  页面变化
            SizeChange(val) {
                this.pageParamsForm.limit = val;
                this.getEmployeesList();

            },
            // 当前页变化
            CurrentChange(val) {
                this.pageParamsForm.page = val;
                this.getEmployeesList();

            },
            // 添加
            addShow() {
                this.employeesInfo={}
                this.dialogVisible = true;
                // alert(this.dialogVisible)
            },
            handleAvatarSuccess(Response,uploFile){
              console.log(Response)
this.employeesInfo.avatar=Response
                alert('图片上传成功')

            },
            // 修改
            async editSysUser(row) {
                console.log(row)
                this.dialogVisible = true
                // this.employeesInfo = {...row}
                this.employeesInfo.employeeId = row.employeeId
                this.employeesInfo.username =row.username
                this.employeesInfo.position =row.position
                this.employeesInfo.email =row.email
                this.employeesInfo.gender =row.gender
                this.employeesInfo.department =row.department
            },
           async submit () {
                if(!this.employeesInfo.employeeId) {
                   await axios.post('http://localhost:8080/employees/add',this.employeesInfo)

                        this.dialogVisible= false
                   alert('添加成功')
                        await this.getEmployeesList()

                }
                else {
                 await axios.put('http://localhost:8080/employees/update',this.employeesInfo)

                        this.dialogVisible= false
                        alert('修改成功')
                        await this.getEmployeesList()

                }

            },
            async deleteByIdFun (row) {

                await axios.delete('http://localhost:8080//employees/deleteById/'+row.employeeId)

                alert('操作成功')
                await this.getEmployeesList()


            },



        },mounted() {
            this.getEmployeesList();

        }
        ,
        created() {
            this.pageParams = this.$data.pageParamsForm;
        },






    })


</script>

</html>

